<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				<view class="custom-title">个人信息</view>
			</block>
		</cu-custom>
		<view class="padding-32">
			<view class="text-center" @click="changeAvatar">
				<image :src="userinfo.avatar" class="img-144"></image>
				<!-- <view >修改{{userinfo.avatar}}</view> -->
				<image class="auimg" src="https://txr001.zthj.net/voucher_img/auimg.png"></image>
			</view>
			
			<view class="num-content padding-top-152">
				<view class="flex padding-top-152 padding-bottom-48 solid-bottom">
					<view class="flex-sub user-left">姓名</view>
					<input class="flex-sub user-right text-right" placeholder="请填写姓名" @blur="input" data-id="nickname" :value="userinfo.nickname" maxlength="20"/>
				</view>
				<view class="flex padding-bottom-48 padding-top-48 solid-bottom">
					<view class="flex-sub user-left">部门</view>
                    <input class="flex-sub user-right text-right" placeholder="请填写部门" @blur="input" data-id="department" :value="userinfo.department" maxlength="15"/>
				</view>
				<view class="flex padding-bottom-48 padding-top-48 solid-bottom">
					<view class="flex-sub user-left">职位</view>
                    <input class="flex-sub user-right text-right" placeholder="请填写职位" @blur="input" data-id="position" :value="userinfo.position" maxlength="15"/>
				</view>
				<view class="flex padding-top-48">
					<view class="flex-sub user-left">手机号</view>
                    <input class="flex-sub user-right text-right" placeholder="请填写手机号" @blur="input" data-id="mobile" :value="userinfo.mobile" maxlength="11"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {}
			}
		},
		onLoad(){
            this.load()
		},
		methods: {
            async load(){
                let res = await this.$api.baseUserInfo();
                if(res.code == 1){
                    this.userinfo = res.data.userinfo
                }
            },
            changeAvatar(){
                let that = this;
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: (res) => {
                        uni.uploadFile({
                            url: 'https://qd.zthj.net/api/Common/upload',
                            filePath: res.tempFilePaths[0],
                            name: 'file',
                            success: (ret) => {
                                let info = JSON.parse(ret.data)
                                this.$api.editUserInfo({k:'avatar', v:info.data.fullurl});
                                that.userinfo.avatar = info.data.fullurl;
                            }
                        });
                    }
                });
            },

            input(e){
                let k =  e.currentTarget.dataset.id;
                let v =   e.detail.value;
                if(k == 'mobile' && v.length != 11){
                    return false;
                }
                this.$api.editUserInfo({k, v});
            }
			
		}
	}
</script>

<style>
	page{background: linear-gradient(180deg, rgba(244,244,244,0) 10%, #F4F4F4 19%);}
</style>
<style scoped lang="less">
	.button_avatar{
		background-color: transparent;
		padding: 0;
		border: 0;
		outline: none;
		box-shadow: unset;
		border: none;
		&::after{
			display: none;
		}
		
	}
	.text-center{
		position: relative;
		width: 176rpx;
		margin: 0 auto;
		.auimg{
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 20rpx;
			bottom: 0;
		}
	}
	.number-bg{
		background-size: 100% 100%;
		width: 100%;
		height: 1624rpx;
	}
	.num-content{
		background: #FFFFFF;
		border-radius: 48rpx;
		margin-top: -72rpx;
		padding:32rpx 32rpx 48rpx;
	}
	.user-left{
		font-size: 32rpx;
		font-weight: 400;
		color: #767879;
	}
	.user-right{
		font-size: 32rpx;
		font-weight: 400;
		color: #010101;
	}
    .img-144{
        border-radius: 50%;
    }
</style>